<template>
  <div>
    <div class="head">
      <div class="flex">
        <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
        <span style="margin-left: 10px">结业证列表</span>
        <el-button style="margin-left: 30px;" @click="down_cert" type="success" :loading="downCertLoading">批量下载</el-button>
      </div>
    </div>
    <div class="box">
      <div>
        <div class="block" style="float:left; margin: 10px; text-align: center;" v-for="item in dataList">
          <div v-if="item.complete_img_url">
            <div >{{ item.username }}</div>
            <div style="margin-bottom: 5px; margin-top: 5px;">{{ item.idcard }}</div>
            <el-image style="width: 180px; height: 250px" :src="item.complete_img_url" :preview-src-list="[item.complete_img_url]"></el-image>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { Cartlist, downCert, PlanCourses, PlanStaffs, TrainTypeTree } from "@/api/manage";
export default {
  name: 'cartlist',
  data() {
    return {
      dataList: [ ],
      downCertLoading: false,
    };
  },
  watch: {

  },
  computed: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    back() {
      this.$router.back();
    },
    getList() {
      const id = this.$route.query.id;
      Cartlist({id: id}).then(res=>{
        this.dataList = res.data
      }).catch(() => {

      })
    },
    down_cert () {
      this.downCertLoading = true;
      this.$message.warning('正在生成....');
      const id = this.$route.query.id;
      downCert({plan_id: id}).then(res=>{
        this.downCertLoading = false;
        window.location.href = res.data.url;
      }).catch(() => {
        this.$message.error('生成失败');
      })
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
  height: 450px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.flex {
  width: 100%;
  align-items: center;
  margin-bottom: 20px;
}
</style>
